<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue生命周期函数</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- 
        1.v-html:vue常用指令,将数据以html标签展示
        2.v-bind和disabled和title做绑定
        3.{{}}只能写表达式,不能写语句
        4.v-once只渲染一次,以后再有变化,也不会渲染
        5.表达式简写,v-on绑定事件,可以简写为@,v-bind绑定属性,可以简写为:title
        6.模板修饰符的作用
        
     -->
</head>
<body>
    <div id="root"></div>
    <script>
        // vue的生命周期函数
        const app = Vue.createApp({
            data() {
                return {
                    message:'<strong>hello world</strong>',
                    test:"test11",
                    dis: false,
                    show: false
                }
            },
            methods: {
                btn(){
                    this.dis = !this.dis;
                }    
            },
            template:`
            <div v-html="message" v-bind:title="test"></div>
            <input v-bind:disabled="dis" />
            <input type="button" @click="btn" value="控制输入框属性"><br>
            <div v-if="show">{{message}}</div> 
            ` 
        });
        const vm = app.mount('#root');
    </script>
</body>
</html>